<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar fixed >
      <template #left>
        <van-icon @click="onBack" name="arrow-left" size="20px" color="gray" style="font-weight: bold;width: 20px"/>
      </template>
      <template #title>
        <span style="color: #FF8800;font-size: 18px">修改账号</span>
      </template>
      <template #right>
        <van-button size="small" @click="onSave" color="#FF8800">保存</van-button>
      </template>
    </van-nav-bar>
    <!-- 修改 -->
    <div style="padding-top: 50px">
      <van-field
        class="input"
        v-model="oldAccount"
        label="账号"
        readonly
        disabled
      />
      <van-field
        class="input"
        v-model="password"
        :type="this.isShowPassword?'':'password'"
        label="密码"
        placeholder="请输入密码"
      >
        <van-icon name="closed-eye" slot="right-icon" @click="onShowPassword"></van-icon>
      </van-field>
      <van-field
        class="input"
        v-model="newAccount"
        label="新账号"
        placeholder="请输入新账号"
      >
        <van-icon name="cross" slot="right-icon" @click="onClearAccount"></van-icon>
      </van-field>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EditAccount',
  data () {
    return {
      password: '',
      newAccount: '',
      isShowPassword: false
    }
  },
  methods: {
    // 返回
    onBack () {
      this.$router.back()
    },
    // 保存
    onSave () {
      // 提交服务器
      this.$api.changeAccountReq({ password: this.password, newAccount: this.newAccount }).then(
        (resp) => {
          if (resp.errMsg === 'OK') {
            this.$store.commit('SetUserAccount', this.newAccount)
            this.$store.commit('SetUserPwd', this.password)
          } else {
            this.$toast(resp.errMsg)
          }
        }
      )
    },
    // 显示密码
    onShowPassword () {
      this.isShowPassword = !this.isShowPassword
    },
    // 清除账号
    onClearAccount () {
      this.newAccount = ''
    }
  },
  computed: {
    oldAccount: function () {
      return this.$store.state.user.account
    }
  }
}
</script>

<style scoped>

</style>
